﻿@model IEnumerable<Vms.Web.Models.LIB_IMG>
@{
    ViewBag.Title = "Index";
}
<link rel="stylesheet" href="~/Scripts/jquery-fileupload/jquery.fileupload-ui.css" />
<h2>Image Library</h2>
<div style="padding-top:10px;padding-bottom:10px;">
    <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Upload images...</span>
                    <input id="fileupload" type="file" name="files[]" data-url="@Url.Content("~/lib/imgs/ImgUploadJson")" accept="image/jpg|image/bmp"  multiple >
    </span>
@using (Html.BeginForm()){    
         <p> <strong style="    padding-left: 10px;    padding-right: 10px;    font-size: 20px;">Title</strong> @Html.TextBox("SearchString")
         <input class="btn btn-success"  type="submit" value="Filter" style="
                margin-top: -9px;
                padding: 5px 30px;
                margin-left: 13px;
                    "/>
        </p> 
        }
    </div>
    <div class="row fileupload-buttonbar">
</div>
<table id="ImgTableList" class="table table-bordered table-striped">
    <tr>
        <th style="width:100px;">Image</th>
        <th>
            Name
        </th>
        <th>
            Dimension(pixel)
        </th>
        <th>
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr class="template-download fade in">
            <td>
                
                @{string img = Url.Content("~/Areas/Lib/Lib_Data/Imgs/"+ @item.ImgFileName);}
                <img src="@img" alt="@item.Name" title="@item.Name" width="@item.Width" height="@item.Height" style="max-width:none"/>
@*                <div style="width:48px;height:48px;overflow:hidden">
                </div>
*@            </td>
            <td>
                @item.Name
            </td>
            <td>
                @item.Width x @item.Height
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id })
                <button data-url="@Url.Content("~/Lib/Imgs/DeleteImg/")@item.Id" data-type="DELETE" class="btn btn-danger delete">
                <i class="icon-trash icon-white"></i>
                <span>Delete</span>
            </button>
            </td>
        </tr>
    }
</table>


@section scripts{
    @Scripts.Render("~/bundles/jquery-fileupload")

<script type="text/javascript">
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            add: function (e, data) {
                //data.context = $('<p/>').text('Uploading...').appendTo(document.body);
                data.submit();
            },
            done: function (e, data) {
                //data.context.text('Upload finished.');
                $.each(data.result, function (index, file) {
                    $("#img").append('<img src="' + file.url + '"/>');
                    $("#ImgTableList").append('<tr class="template-download fade in"><td><img src="' + file.url + '" style="max-width:none"/></td>' +
                                              '<td>' + file.name + '</td>' +
                                              '<td>' + file.width + ' x ' + file.height + '</td>' +
                                              '<td>' +
                                              '<a href="' + file.edit_url + '">' + file.name + '</a>'+
                                              '<button data-url="' + file.delete_url + '" data-type="DELETE" class="btn btn-danger delete">' +
                                              '<i class="icon-trash icon-white"> </i>' +
                                              '<span> Delete</span></td>' +
                                              '</tr>');
                });
            }
        });
        $(".delete").live("click", function () {
            //            alert('a');
            //return;
            if (confirm('Are you want to delete this image?')) {
                var currentRow = $(this).closest('tr');
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: $(this).attr('data-url'),
                    //data: data,
                    success: function (data) {
                        if (data.success) {
                            //alert("Image's deleted");
                            currentRow.remove();
                        } else {
                            alert("Detele''s false");
                        }
                    }
                });
            }
        });
    });

</script>
}